<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<div id="app">
			<counter v-model:count="count" v-model:msg="msg"></counter>
			<input type="text" v-model="count" />
		</div>
	</body>
</html>
<script>
	  const counter = {
		  props:["count",'msg'],
		  methods:{
			  changeCount(){
				  this.$emit("update:count",this.count + 1)
				  this.$emit('update:msg',this.msg + '?')
			  }
		  },
		  template:
		  `
		      <div>子组件计算器:{{count}}</div>
			  <button @click="changeCount">修改count</button>
			  <div>子组件提示信息:{{msg}}</div>
		  `
	  }
	  
	  
	  const app = Vue.createApp({
		  components:{counter},
		  data(){
			  return{
				  count:0,
				  msg:'提示：发财啦'
			  }
		  }
	  })
	  const vm = app.mount('#app')
</script>